<template>
  <ul class="mo-paging">
    <!-- prev -->
    <li
      :class="[
        'paging-item',
        'paging-item--prev',
        { 'paging-item--disabled': index === 1 },
      ]"
      @click="prev"
    >
      <i class="el-icon-arrow-left"></i>
    </li>

    <!-- first -->
    <!-- <li
      :class="[
        'paging-item',
        'paging-item--first',
        { 'paging-item--disabled': index === 1 },
      ]"
      @click="first"
    >
      first
    </li> -->

    <li :class="['paging-item', 'paging-item--more']" v-if="showPrevMore">
      ...
    </li>

    <li
      :class="['paging-item', { 'paging-item--current': index === pager }]"
      v-for="(pager, idx) in pagers"
      :key="idx"
      @click="go(pager)"
    >
      {{ pager }}
    </li>

    <li :class="['paging-item', 'paging-item--more']" v-if="showNextMore">
      ...
    </li>

    <!-- last -->
    <!-- <li
      :class="[
        'paging-item',
        'paging-item--last',
        { 'paging-item--disabled': index === pages },
      ]"
      @click="last"
    >
      last
    </li> -->

    <!-- next -->
    <li
      :class="[
        'paging-item',
        'paging-item--next',
        { 'paging-item--disabled': index === pages },
      ]"
      @click="next"
    >
      <i class="el-icon-arrow-right"></i>
    </li>
  </ul>
</template>
<script>
export default {
  name: "MoPaging",
  //通过props来接受从父组件传递过来的值
  props: {
    //页面中的可见页码，其他的以...替代, 必须是奇数
    perPages: {
      type: Number,
      default: 5,
    },

    //当前页码
    pageIndex: {
      type: Number,
      default: 1,
    },

    //每页显示条数
    pageSize: {
      type: Number,
      default: 10,
    },

    //总记录数
    total: {
      type: Number,
      default: 1,
    },
  },
  methods: {
    prev() {
      if (this.index > 1) {
        this.go(this.index - 1);
      }
    },
    next() {
      if (this.index < this.pages) {
        this.go(this.index + 1);
      }
    },
    first() {
      if (this.index !== 1) {
        this.go(1);
      }
    },
    last() {
      if (this.index != this.pages) {
        this.go(this.pages);
      }
    },
    go(page) {
       if (this.index !== page) {
            this.index = page
            //父组件通过change方法来接受当前的页码
            this.$emit('pageChange', this.index)
            // console.log(this.index);
        }
    },
  },
  computed: {
    //计算总页码
    pages() {
      return Math.ceil(this.size / this.limit);
    },

    //计算页码，当count等变化时自动计算
    pagers() {
      const array = [];
      const perPages = this.perPages;
      const pageCount = this.pages;
      let current = this.index;
      const _offset = (perPages - 1) / 2;

      const offset = {
        start: current - _offset,
        end: current + _offset,
      };

      //-1, 3
      if (offset.start < 1) {
        offset.end = offset.end + (1 - offset.start);
        offset.start = 1;
      }
      if (offset.end > pageCount) {
        offset.start = offset.start - (offset.end - pageCount);
        offset.end = pageCount;
      }
      if (offset.start < 1) offset.start = 1;

      this.showPrevMore = offset.start > 1;
      this.showNextMore = offset.end < pageCount;

      for (let i = offset.start; i <= offset.end; i++) {
        array.push(i);
      }

      return array;
    },
  },
  data() {
    return {
      index: this.pageIndex, //当前页码
      limit: this.pageSize, //每页显示条数
      size: this.total || 1, //总记录数
      showPrevMore: false,
      showNextMore: false,
    };
  },
  watch: {
    pageIndex(val) {
      this.index = val || 1;
    },
    pageSize(val) {
      this.limit = val || 10;
    },
    total(val) {
      this.size = val || 1;
    },
  },
};
</script>
<style scoped lang="less">
.mo-paging {
  display: inline-block;
  padding: 0;
  margin: 1rem 0;
  font-size: 0;
  list-style: none;
  user-select: none;
  > .paging-item {
    width: 40px;
    height: 40px;
    display: inline-block;
    font-size: 14px;
    line-height: 40px;
    text-align: center;
    position: relative;
    text-decoration: none;
    border: 1px solid #e6ecf3;
    border-radius: 2px;
    margin: 10px;
    cursor: pointer;
    color: #fff;
    &:first-child {
      margin-left: 0;
    }
    &:hover {
      background-color:  #1474d0;
      color: #fff;
    }
    &.paging-item--disabled{
    //   background-color: #fff;
      color: #505050;
      margin: 10px;
    }
    &.paging-item--more{
        border: none;
        // background-color: #1474d0;
    } 
    //禁用
    &.paging-item--disabled {
      cursor: not-allowed;
      opacity: 0.75;
    }
    &.paging-item--more,
    &.paging-item--current {
      cursor: default;
    }
    //选中
    &.paging-item--current {
      background-color: #1474d0;
      border-radius: 2px;
      color: #fff;
      position: relative;
      z-index: 1;
      border-color: #1474d0;
    }
  }
}
</style>